<template>
    <div>
        <div class="GoThere">
            <p style="font-size: 14px; font-weight: 700; color: rgba(162, 182, 255, 1);">
                近三年来毕业人员去向
            </p>
        </div>
        <div class="GoThere_Bottom">
            <div class="GoThere_Bottom_T">
                <p class="GoThere_Bottom_T_P">北京</p>
                <div class="GoThere_Number">
                    <div class="GoThere_Number-2022">
                        <p style="color: rgba(255, 7, 198, 1); font-weight: 400;">6000 <span
                                style="font-size: 12px;">人</span> </p>
                        <img src="../../assets/Icon_2022.png" alt="">
                        <p style="font-size: 12px; margin-left: 6px;">2022</p>
                    </div>
                    <div class="GoThere_Number-2021">
                        <p style="color: rgba(8, 219, 242, 1); font-weight: 400;">8980 <span
                                style="font-size: 12px;">人</span> </p>
                        <img src="../../assets/Icon_2021.png" alt="">
                        <p style="font-size: 12px; margin-left: 6px;">2021</p>
                    </div>
                    <div class="GoThere_Number-2020">
                        <p style="color: rgba(238, 204, 91, 1); font-weight: 400;">2345 <span
                                style="font-size: 12px;">人</span> </p>
                        <img src="../../assets/Icon_2020.png" alt="">
                        <p style="font-size: 12px; margin-left: 6px;">2021</p>
                    </div>
                </div>
            </div>
            <div ref="chart" class="GoThere_Bottom_B">

            </div>
        </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, onBeforeUnmount, ref } from 'vue';

const chart = ref(null);
let myChart = null;

const GoThere = () => {
    myChart = echarts.init(chart.value);
    window.addEventListener('resize', function () {
        myChart.resize();
    });

    // 配置图表选项
    const option = {
        title: {
            // text: '2020-2022 各城市人数分布',
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow', // 鼠标悬浮显示阴影效果
            },
        },
        legend: {
            show: false,
            data: ['2020年', '2021年', '2022年'], // 图例，三种数据的名称
        },
        grid: {
            left: '12%', // 设置图表网格左边距为 20%，将图表向右移动
            top: "5%",
            bottom: '10%', // 设置图表网格顶部边距
        },
        xAxis: {
            type: 'value', // 数值型 X 轴
            min: 0,
            max: 5000,
            interval: 1000, // 每 1000 为一个刻度
            axisLabel: {
                formatter: '{value}', // 格式化数值
            },
            splitLine: {
                show: false,// 显示Y轴网格线
                // lineStyle: {
                //     color: '#2B3E7B', // 网格线颜色
                //     width: 1, // 网格线宽度
                //     type: 'solid', // 网格线类型，'solid'为实线
                // }
            }
        },
        yAxis: {
            type: 'category', // 类别型 Y 轴
            data: ['上海', '天津', '重庆', '广东', '广西', '浙江', '江苏', '湖北'], // Y 轴城市名称
            axisLabel: {
                color: '#fff', // Y轴标签颜色改成深色
            },
            splitLine: {
                show: false,// 显示Y轴网格线
                // lineStyle: {
                //     color: '#2B3E7B', // 网格线颜色
                //     width: 1, // 网格线宽度
                //     type: 'solid', // 网格线类型，'solid'为实线
                // }
            }
        },
        series: [
            {
                name: '2020年',
                type: 'bar',
                data: [3200, 1400, 1800, 2700, 2200, 3900, 4300, 3300], // 每个城市的 2020 年数据
                itemStyle: {
                    color: '#FFD700', // 黄色
                    borderRadius: [5, 5, 5, 5],
                },
            },
            {
                name: '2021年',
                type: 'bar',
                data: [3400, 1600, 1900, 2900, 2400, 4100, 4500, 3500], // 每个城市的 2021 年数据
                itemStyle: {
                    color: '#1E90FF', // 蓝色
                    borderRadius: [5, 5, 5, 5],
                },
            },
            {
                name: '2022年',
                type: 'bar',
                data: [3600, 1800, 2100, 3100, 2600, 4300, 4700, 3700], // 每个城市的 2022 年数据
                itemStyle: {
                    color: '#800080', // 紫色
                    borderRadius: [5, 5, 5, 5],
                },
            },
        ],
    };

    // 设置图表的配置和数据
    myChart.setOption(option);
}

onMounted(() => {
    GoThere();
})

onBeforeUnmount(() => {
    if (myChart) {
        myChart.dispose();  // 销毁图表实例，清理资源
    }
});

</script>

<style lang="scss" scoped>
.GoThere {
    position: fixed;
    left: 70px;
    top: 70px;
    width: 330px;
    height: 30px;
    opacity: 1;
    /* background: linear-gradient(229.52deg, rgba(14, 95, 255, 0.5) 0%, rgba(14, 95, 255, 0.22) 100%);
    border: 1.6px solid rgba(61, 110, 174, 1); */
    background-image: url('../../assets/Path2.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    line-height: 30px;

    p {
        margin-left: 14px;
    }
}

.GoThere_Bottom {
    width: 330px;
    height: 340px;
    opacity: 1;
    background: rgba(12, 29, 95, 1);
    position: fixed;
    left: 70px;
    top: 110px;

    .GoThere_Bottom_T {
        width: 100%;
        height: 110px;
        // background: rgb(147, 111, 196);
        overflow: hidden;

        .GoThere_Bottom_T_P {
            margin-left: 10px;
            font-size: 14px;
            font-weight: 500;
            margin-top: 10px;
        }

        .GoThere_Number {
            width: 100%;
            display: flex;
            justify-content: space-around;
            margin-top: 5px;

            img {
                margin-left: 5px;
            }
        }
    }

    .GoThere_Bottom_B {
        width: 100%;
        height: 230px;
    }
}
</style>